import React, { useState } from "react";
import { Watermark } from "antd";
import { Outlet, useLocation, useRouteLoaderData } from "react-router-dom";
import type { ColorPickerProps, GetProp, WatermarkProps } from "antd";

// 定义颜色类型
type Color = Extract<GetProp<ColorPickerProps, "value">, string | { cleared: any }>;

// 水印配置接口
interface WatermarkConfig {
    content: string; // 水印文本内容
    color: string | Color; // 水印颜色
    fontSize: number; // 字体大小
    zIndex: number; // 水印层级
    rotate: number; // 水印旋转角度
    gap: [number, number]; // 水印间距 [x, y]
    offset?: [number, number]; // 水印偏移量 [x, y]
}

// 主布局组件
const App: React.FC = () => {
    // 获取当前路由信息
    const $route = useLocation();
    console.log("$route", $route);

    // 获取路由加载器返回的数据 useRouteLoaderData(route-id)
    const data = useRouteLoaderData($route.pathname);
    console.log("data", data);

    // 水印配置状态
    const [config, setConfig] = useState<WatermarkConfig>({
        content: "@Gee demo", // 水印文本
        color: "rgba(0, 0, 0, 0.15)", // 水印颜色
        fontSize: 16, // 字体大小
        zIndex: 9999, // 层级
        rotate: -22, // 旋转角度
        gap: [200, 200], // 间距
        offset: undefined, // 偏移量
    });

    // 解构水印配置，并提供默认值
    const {
        content = "@Gee demo",
        color = "rgba(0, 0, 0, 0.15)",
        fontSize = 16,
        zIndex = 9999,
        rotate = -22,
        gap = [100, 100],
        offset = undefined,
    } = config || {};

    // 水印组件属性
    const watermarkProps: WatermarkProps = {
        content, // 水印文本
        zIndex, // 层级
        rotate, // 旋转角度
        gap, // 间距
        offset, // 偏移量
        font: {
            // 字体配置
            color: typeof color === "string" ? color : color.toRgbString(),
            fontSize,
        },
    };

    // 重置配置的函数
    const resetConfig = () => {
        if (config.rotate === -22) {
            setConfig({
                content: "@Gee demo",
                color: "rgba(0, 0, 0, 0.15)",
                fontSize: 16,
                zIndex: 9999,
                rotate: 22,
                gap: [200, 200],
                offset: undefined,
            });
        } else {
            setConfig({
                content: "@Gee demo",
                color: "rgba(0, 0, 0, 0.15)",
                fontSize: 16,
                zIndex: 9999,
                rotate: -22,
                gap: [200, 200],
                offset: undefined,
            });
        }
    };

    return (
        <Watermark {...watermarkProps}>
            {/* 标题区域 */}
            <div
                style={{
                    margin: 0,
                    height: 40,
                    lineHeight: "40px",
                    textAlign: "center",
                    fontSize: 36,
                    marginTop: 60,
                }}
                onClick={resetConfig}
            >
                Title：{data?.meta?.title}
            </div>

            {/* 内容区域 */}
            <div
                style={{
                    width: "100vw", // 宽度占满视口
                    height: "calc(100vh - 200px)", // 高度为视口高度减去标题和底部留白
                    display: "flex", // 使用 flex 布局
                    flexDirection: "column", // 垂直排列
                    justifyContent: "center", // 垂直居中
                    alignItems: "center", // 水平居中
                    marginBottom: 100, // 底部留白
                }}
            >
                <Outlet /> {/* 子路由内容 */}
            </div>
        </Watermark>
    );
};

export default App;
